<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Tables WebUI 2.0</title>
<style>

</style>
<!--[if lt IE 9]>
      <script src="js/html5.js"></script>
    <![endif]-->



<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="css/prettify.css" rel="stylesheet" type="text/css">


<link href="css/webui.css" rel="stylesheet" type="text/css">
<link href="css/data-tables.css" rel="stylesheet" type="text/css"/>

</head>

<body style="padding-top:90px;">
	<div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://code.google.com/webui-framework">WebUI FrameWork</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="index.html">OverView</a></li>
              <li><a href="menus.html">Menus</a></li>
              <li><a href="lists.html">Lists</a></li>
              <li><a href="colors.html">Colors</a></li>
              <li><a href="forms.html">Forms</a></li>
              <li><a href="buttons.html">Tables</a></li>
              <li class="divider-vertical"></li>
              <li><a href="wedgits.html">Wedgits</a></li>
              
            </ul>
            <ul class="nav pull-right">
            	<li><a href="#">WelCome WebUI</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    
  <div class="container" >  
    <header class="margin20-b">
    	<h1>Tables （ WebUI FrameWork 2.0  ） <small>Smart Framework With Bootstrap</small>  </h1>
        <div class="menubar menubar-large  margin10-t">
        	<div class="container">	
                <ul class="menu pull-left">
                    <li><a href="#"><i class="icon-adjust"></i>&nbsp;Home&nbsp;</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">&nbsp;Pages</a></li>
                    <li><a href="#">About</a></li>
                    
                </ul>
                
                
				
                <ul class="menu pull-right">
            		<li><a href="#"><i class="icon-search"></i>&nbsp;查找&nbsp;</a></li>
           		 </ul> 
                 <form class="menubar-search pull-right"><input type="text" class="search-query" placeholder="查找"></form>           
            
            </div>
            
        </div>
        
    </header>
    
    <section id="bootstrapTables">
    	<h2 class="page-header">Bootstrap 支持的几种Table组合样式</h2>
        <div class="row">
        	<table>
                <small>code</small><code>df</code>
            
            </table>    
        	<div class="span12 margin20-b">
            	<h2 class="well pad5">样式一 &nbsp;<small>默认样式，不代竖边框 Code: </small><code>&lt;table class="table table-striped"&gt;</code></h2>
                <table border="0" cellspacing="0" cellpadding="0" class="table table-striped">
                          <thead>	
                               <tr>
                                 <th width="8%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="17%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
            </div>
        </div>
        
       <div class="row"> 
        <div class="span12  margin20-b">
            	<h2 class="well pad5">样式二 &nbsp;<small>带边框样式 Code: </small><code>&lt;table class="table table-bordered table-striped"&gt;</code></h2>
                <table border="0" cellspacing="0" cellpadding="0" class="table table-bordered table-striped" >
                          <thead>	
                               <tr>
                                 <th width="7%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="18%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                             <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                             <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
            </div>
        </div>
        
        
         <div class="row"> 
        <div class="span12  margin20-b">
            	<h2 class="well pad5">样式三 &nbsp;<small>紧凑布局 Code: </small><code>&lt;table class="table table-bordered table-striped table-condensed"&gt;</code></h2>
                <table border="0" cellspacing="0" cellpadding="0" class="table table-bordered table-striped table-condensed" >
                          <thead>	
                               <tr>
                                 <th width="8%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="17%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td style="padding-left:10px;">
                                    <a href="#"><i class="icon-edit"></i>编辑</a>
                                    <a href="#"><i class="icon-remove"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                  <td style="padding-left:10px;">
                                    <a href="#"><i class="icon-edit"></i>编辑</a>
                                    <a href="#"><i class="icon-remove"></i>删除</a>
                                 </td>
                             </tr>
                             <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                  <td style="padding-left:10px;">
                                    <a href="#"><i class="icon-edit"></i>编辑</a>
                                    <a href="#"><i class="icon-remove"></i>删除</a>
                                 </td>
                             </tr>
                             <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                  <td style="padding-left:10px;">
                                    <a href="#"><i class="icon-edit"></i>编辑</a>
                                    <a href="#"><i class="icon-remove"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
            </div>
        </div>
    
    </section>
    
    <section id="customStyles">
   		<h2 class="page-header">WebUI 扩展样式</h2> 
        <div class="row">
        	<div class="span12  margin20-b">
            	<h2 class="well pad5">样式一 <small>突出表头背景色 Code: </small><code>&lt;thead class="bg-metal"&gt;</code></h2>
            			<table border="0" cellspacing="0" cellpadding="0" class="table table-striped ">
                          <thead class="bg-metal text-shadowed">	
                               <tr>
                                 <th width="7%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="18%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
            </div>
        </div>
        
        
        <div class="row">
        	<div class="span12">
            	<h2 class="well pad5">样式一 <small>隐藏所有边框 Code: </small><code>&lt;table class="table table-striped table-clean"&gt;</code></h2>
            			<table border="0" cellspacing="0" cellpadding="0" class="table table-striped table-clean ">
                          <thead>	
                               <tr>
                                 <th width="7%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="18%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
                       
                       <div class="pagination pull-right">
                          <ul>
                          	<li><a href="#">首页</a></li>
                            
                            <li class="active">
                              <a href="#">1</a>
                            </li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li class="disabled"><a href="#">...</a></li>
                            
                            <li><a href="#">末页</a></li>
                          </ul>
					</div>
            </div>
        </div>
    </section>
    
    
    <section id="dataTables">
   		<h2 class="page-header">Jquery DataTables 插件</h2> 
        <div class="row">
        	<div class="span12  margin20-b">
            	<h2 class="well pad5">样式一 <small>默认带排序和分页的表格 </small></h2>
            			<table border="0" cellspacing="0" cellpadding="0" class="table table-striped table-bordered " id="dataTable1">
                          <thead class="bg-metal">	
                               <tr>
                                 <th width="7%" scope="col">序号&nbsp;</th>
                                 <th width="44%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                 <th width="18%" scope="col">操作&nbsp;</th>
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a>
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>3</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>4</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                             <tr>
                                 <td>5</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                    <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                               <tr>
                                 <td>6</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>7</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                              <tr>
                                 <td>8</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                 <td>
                                    <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn  btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                  </td>
                             </tr>
                               <tr>
                                 <td>9</td>
                                 <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 <td>
                                     <a href="#" class="btn"><i class="icon-edit"></i>编辑</a>
                                     <a href="#" class="btn btn-danger"><i class="icon-remove icon-white"></i>删除</a>
                                 </td>
                             </tr>
                         </tbody>
                       </table>
                       
              </div>         
        </div>
        
        
        <div class="row">
        	<div class="span12">
            	<h2 class="well pad5">DataTables <small>行内按钮操作</small></h2>
            			<table border="0" cellspacing="0" cellpadding="0" class="table table-striped table-inrow" id="customTable">
                          <thead>	
                               <tr>
                                 <th width="7%" scope="col">序号&nbsp;</th>
                                 <th width="62%" scope="col">标题&nbsp;</th>
                                 <th width="11%" scope="col">分类&nbsp;</th>
                                 <th width="20%" scope="col">主题词&nbsp;</th>
                                
                             </tr>
                         </thead>
                         <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>
                                   <div class="font14"><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></div>
                                  <div class="row-action invisible"><a href="#" >快速编辑</a>&nbsp; | &nbsp;<a href="#" >编辑</a>&nbsp; | &nbsp;<a href="#" class="red">删除</a></div>   
                                 </td>
                                 <td>国内</td>
                                 <td>央视，企业</td>
                                 
                             </tr>
                               <tr>
                                 <td>2</td>
                                 <td>
                                 	<div class="font14"><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></div>
                                 	 <div class="row-action invisible"><a href="#" >快速编辑</a>&nbsp; | &nbsp;<a href="#" >编辑</a>&nbsp; | &nbsp;<a href="#" class="red">删除</a></div>    
                                 </td>
                                 <td>社会</td>
                                 <td>郑州，志愿者</td>
                                 
                             </tr>
                               <tr>
                                 <td>3</td>
                                 <td><div class="font14"><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></div>
                                 	  <div class="row-action invisible"><a href="#" >快速编辑</a>&nbsp; | &nbsp;<a href="#" >编辑</a>&nbsp; | &nbsp;<a href="#" class="red">删除</a></div>   
                                 </td>
                                 <td>地方</td>
                                 <td>郑州，志愿者</td>
                                
                             </tr>
                               <tr>
                                 <td>4</td>
                                 <td>
                                 	<div class="font14"><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></div>
                                   <div class="row-action invisible"><i class="icon-edit"></i><a href="#" >编辑</a>&nbsp;&nbsp;<i class="icon-remove"></i><a href="#" class="red">删除</a></div>   
                                    </td>
                                 <td>地方</td>
                                 <td>&nbsp;</td>
                                 
                             </tr>
                         </tbody>
                       </table>
            </div>
        </div>
    </section>
   
    
    <footer style="margin:40px 0 50px 0;padding:20px 0;border-top:1px solid #e5e5e5;">
    	<p class="pull-right"><a href="#">返回顶端</a></p>
        <p><a href="http://code.google.com/webui-framework">WebUI Framework 2.0</a> Designed For Developers Thanks For Twitter Bootstrap Framework </p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a></p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
    </footer>
    
    
  </div>   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/prettify.js"></script>
    <script type="text/javascript" src="js/dataTables.js"></script>
    <script type="text/javascript" src="js/dataTables.paging.js"></script>
    
    <script type="text/javascript">
    	
		$(function(){
			prettyPrint();
			
			$.extend( $.fn.dataTableExt.oStdClasses, {
				"sSortAsc": "header headerSortDown",
				"sSortDesc": "header headerSortUp",
				"sSortable": "header"
			} );
			
			$("#dataTable1").dataTable({ 
				"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
				"iDisplayLength": 6,
				"bAutoWidth": false,
				"bInfo": true,
				"sPaginationType": "bootstrap",
				"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 4 ] }],
				"oLanguage": {
					"sLengthMenu": "每页显示 _MENU_ 记录",
					"sSearch": "过滤",
					"sZeroRecords": "抱歉，暂无数据",
					"sInfo": "显示 _START_ / _END_ 总共 _TOTAL_ 记录",
					"sInfoEmpty": "显示 0 / 0 共 0 记录",
					"sInfoFiltered": "(从 _MAX_ 条记录过滤)",
					"oPaginate": {
						"sFirst": "首页",
						"sLast": "末页",
						"sNext": "下一页",
						"sPrevious": "上一页"
					}
				   
				}
		    });
			
			$("#customTable").dataTable({
			 "bInfo": false,
			 "bPaginate":false,
			 "bFilter":false,
			 "bLengthChange":false
			});
			
			
			$("#customTable tr").mousemove(function(){
				$(".row-action",this).css("visibility","visible");	
			});
			$("#customTable tr").mouseout(function(){
				$(".row-action",this).css("visibility","hidden");	
			});
			
			
		});
    
    </script>
    
</body>
</html>
 